<template>
	<view >
		<view class="bg">
			<HeaderVue title="提现" color="#fff"></HeaderVue>
		</view>
		<view class="item col"> 
			<view class="top row-between-center" >
				<view class="col" >
					<view class="row" >
						<view class="bank row-center">
							<image src="/static/images/withdraw.png" class="bank-img"></image>
						</view>
						<view class="card">招商银行 622****4843</view>
					</view>
					
					<view class="desc">到账银行卡</view>
				</view>
				<image src="/static/images/withdraw_icon.png" class="icon"></image>
			</view>
			<view class="col" style="margin-top: 60rpx;margin-left: 40rpx;margin-right: 44rpx;">
				<view class="tip">提现金额</view>
				<view class="row" style="margin-top: 20rpx;">
					<view class="rmb">
						￥
					</view>
					<input  placeholder="可提现800.00元" v-model="num" style="flex: 1;"/>
					<view class="all row-center">全部</view>
				</view>
				<view class="line"></view>
				<view class="total">最低提现金额 100.00元</view>
				<view class="btn row-center">立即提现</view>
			</view>
			<view style="height: 80rpx;"></view>
		</view>
	</view>
</template>

<script>
import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				num:''
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style scoped lang="scss">
	.bg{
		width: 750rpx;
		height: 500rpx;
		background: #232631;
	}
	.item{
		
		margin-top: -400rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		border-radius: 12rpx;
		background: white;
		.top{
			margin: 5rpx;
			height: 140rpx;
			background-color: #F5F8FF;
			.bank{
				margin-left: 46rpx;
				background-color: white;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
			}
			.bank-img{
				width: 32rpx;
				height: 32rpx;
			}
			.card{
				margin-left: 26rpx;
				color: #20252B;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 44rpx; /* 157.143% */
			}
			.desc{
				margin-left: 114rpx;
				color:  #6A6876;
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 36rpx; /* 180% */
			}
			.icon{
				margin-right: 60rpx;
				width: 24rpx;
				height: 24rpx;
			}
			
		}
		.tip{
			color: #6A6876;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
		.rmb{
			color:  #20252B;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 110% */
		}
		.place{
			color: #D0CFD5;
			font-size: 44rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 60rpx; /* 136.364% */
		}
		.all{
			width: 80rpx;
			height: 40rpx;
			flex-shrink: 0;
			border-radius: 24rpx;
			border: 0.6rpx solid #7B7B7B;
			background: linear-gradient(270deg, rgba(248, 206, 148, 0.01) 0%, rgba(252, 223, 181, 0.01) 100%);
			
			color: #5E6472;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.total{
			margin-top: 10rpx;
			color:  rgba(106, 104, 118, 0.45);
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.btn{
			margin-top: 40rpx;
			height: 92rpx;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 48rpx; /* 150% */
			border-radius: 46rpx;
			background: #DCE1E7;
		}
		.line{
			margin-top: 30rpx;
			height: 1rpx;
			background: #E6E6E6;
		}
	}
</style>
